<template>
  <div class="max">
    <my-header :backBtn="true">
      <div slot="title">
        <template v-if="access == 'kinsfolk'"> 宝宝考勤 </template>
        <template v-else> 考勤统计 </template>
      </div>
    </my-header>
    <div class="tl cont-nof">
      <div class="weui-navbar">
        <div
          class="weui-navbar__item"
          :class="{ 'weui-bar__item_on': params.direction == 0 }"
          @click="cliekMenu(0)"
        >
          <template v-if="access == 'kinsfolk'"> 入园 </template>
          <template v-else> 入园统计 </template>
        </div>
        <div
          class="weui-navbar__item"
          :class="{ 'weui-bar__item_on': params.direction == 1 }"
          @click="cliekMenu(1)"
        >
          <template v-if="access == 'kinsfolk'"> 出园 </template>
          <template v-else> 出园统计 </template>
        </div>
      </div>
      <div class="search-cell flex">
        <div class="search-item">日期</div>
        <div class="search-box">
          <input
            class="search-input"
            type="date"
            v-model="params.day"
            @change="queryFn"
          />
        </div>
      </div>
      <template v-if="access === 'kinsfolk'">
        <div class="home_block oh tc" v-for="(item, index) in atd" :key="index">
          <div class="fl p_total p_total_photo tc">
            <div class="p_photo">
              <img :src="item.avatar" alt="" />
            </div>
            {{ item.name }}
          </div>
          <div class="fr p_items p_report tl flex">
            <div>学龄段：{{ item.gradeName }}</div>
            <div>班级：{{ item.clazzName }}</div>
            <div v-if="params.direction === 0">
              入园时间：
              <span class="p_time">{{
                item.signTime ? item.signTime : "未入园"
              }}</span>
            </div>
            <div v-else>
              出园时间：
              <span class="p_time">{{
                item.signTime ? item.signTime : "未出园"
              }}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="search-cell flex">
          <div class="search-item">学龄段</div>
          <div class="search-box">
            <select
              class="search-select"
              v-model="gradeId"
              @change="fetchClazzList"
            >
              <option v-for="cla in gradeList" :value="cla.id">
                {{ cla.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="search-cell flex">
          <div class="search-item">班级</div>
          <div class="search-box">
            <select
              class="search-select"
              v-model="params.clazzId"
              @change="queryFn"
            >
              <option v-for="cla in clazzList" :value="cla.id">
                {{ cla.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="search-cell flex">
          <div class="search-item">姓名</div>
          <div class="search-box">
            <input
              class="search-input"
              v-model="params.name"
              type="text"
              @input="queryFn"
              placeholder="请输入幼儿名字"
            />
          </div>
        </div>
        <div class="home_block oh">
          <div class="home_title tl">
            <template v-if="params.direction === 0"> 入园概况 </template>
            <template v-else> 出园概况 </template>
          </div>
          <div class="fl p_total">
            <div class="p_number tc">
              <span class="p_number">{{ atd.total }}</span
              >人
            </div>
            <div class="tc">宝宝总数</div>
          </div>
          <div class="fr p_items">
            <div class="point_blue flex" v-if="params.direction === 0">
              <div>入园人数</div>
              <div>{{ atd.enterTotal }}人</div>
            </div>
            <div class="point_blue flex" v-else>
              <div>出园人数</div>
              <div>{{ atd.enterTotal }}人</div>
            </div>
            <div class="point_red flex">
              <div>请假人数</div>
              <div>{{ atd.leaveTotal }}人</div>
            </div>
          </div>
        </div>
        <div class="search_list oa">
          <div
            class="search_res_item flex"
            v-for="(item, index) in atd.list"
            :key="index"
          >
            <div class="avatar">
              <img :src="item.avatar" class="avatar" />
            </div>
            <div class="search_info flex">
              <div class="name">
                <div>{{ item.name }}</div>
              </div>
              <div class="status">
                <template v-if="item.signTime">
                  {{ item.clazzName }} {{ item.signTime }}
                  <template v-if="params.direction === 0"> 入园 </template>
                  <template v-else> 出园 </template>
                </template>
                <template v-else>
                  {{ item.clazzName }}
                  <span style="color: #ff6d3f">
                    <template v-if="params.direction === 0"> 未入园 </template>
                    <template v-else> 未出园 </template></span
                  >
                </template>
              </div>
            </div>
          </div>
          <div
            class="loadMore"
            @click="loadmore"
            v-if="params.size < params.total"
          >
            点击加载更多
          </div>
          <div class="loadMore" v-else>没有更多数据了</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import PullTo from "vue-pull-to";

export default {
  components: {
    PullTo,
  },
  data() {
    let time = this.$getNowDate("date");
    return {
      gradeId: "",
      access: "",
      atd: {
        enterTotal: 0,
        leaveTotal: 0,
        list: [],
        total: 1,
      },
      params: {
        current: 1,
        direction: 0,
        size: 10,
        pages: 0,
        total: 0,
        clazzId: "",
        day: time,
        name: "",
      },
      clazzList: [],
      gradeList: [],
      enterList: [],
      outList: [],
    };
  },
  methods: {
    cliekMenu(direction) {
      this.params.direction = direction;
      this.queryFn();
    },
    loadmore() {
      this.params.size += 10;
      this.queryFn();
    },
    queryFn() {
      if (this.access == "kinsfolk") {
        this.getKinsfolkStudentAt();
      } else {
        this.$http.fetchStudentRecordStatics(this.params).then((resp) => {
          let data = resp.data;
          this.atd = data;
          Object.assign(this.params, {
            current: data.current,
            size: data.size,
            pages: data.pages,
            total: data.totalSize,
          });
        });
      }
    },
    getGradeList() {
      this.$http.getGradeList().then((resp) => {
        let list = resp.data;
        this.gradeList = list;
        if (list.length > 0) {
          this.gradeId = list[0].id;
          this.fetchClazzList();
        }
      });
    },
    fetchClazzList() {
      this.$http
        .getClazzListByGradeId({
          gradeId: this.gradeId,
        })
        .then((resp) => {
          let clazzList = resp.data;
          this.clazzList = clazzList;
          if (clazzList.length > 0) {
            this.params.clazzId = clazzList[0].id;
          }
          this.queryFn();
        });
    },
    getKinsfolkStudentAt() {
      this.$http.getKinsfolkHomeStatics(this.params).then((res) => {
        this.atd = res.data;
      });
    },
  },
  beforeDestroy() {
    this.$Cookies.set("menu", this.params.direction);
  },
  created() {
    this.access = this.$Cookies.get("loginType");
    if (this.access == "kinsfolk") {
      this.getKinsfolkStudentAt();
    } else {
      this.getGradeList();
    }
  },
};
</script>

<style scoped>
.search_list {
  height: calc(100% - 38rem);
  width: calc(100% - 16px);
  margin: 1rem auto 0;
  padding: 0 1rem;
  box-sizing: border-box;
  background-color: #ffffff;
}

.search_res_item {
  height: 10rem;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
}

.search_res_item .avatar {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: #eeeeee;
}

.search_info {
  margin-left: 2.2rem;
  font-size: 1.6rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.search_info .status {
  font-size: 1.4rem;
  color: rgba(77, 77, 77, 1);
  margin-top: 0.5rem;
}

.home_block {
  color: #0d0d0d !important;
  width: calc(100% - 16px);
  background: #ffffff;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  margin: 1rem auto 1.5rem;
  border-radius: 4px;
}

.home_title {
  font-size: 1.6rem;
  border-left: 4px solid #36c12d;
  border-radius: 10px;
  width: 0;
  white-space: nowrap;
  text-indent: 1rem;
  line-height: 1.6rem;
  height: 1.6rem;
  margin-bottom: 1.5rem;
}

.p_total {
  width: 45%;
  height: 10rem;
  box-sizing: border-box;
  border-right: 1px solid #dddddd;
  padding-right: 4.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.4rem;
  margin-top: 1rem;
}

.p_total_photo {
  padding-right: 1rem;
  height: 13rem;
  font-size: 1.6rem;
  width: 35%;
  margin-top: 0;
}

.p_photo {
  margin: 0 auto 1rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  overflow: hidden;
  background: #e8e8e8;
}

.p_photo img {
  width: 100%;
}

.p_number {
  height: 5rem;
  line-height: 5rem;
  font-size: 2rem;
}

.p_number span {
  font-size: 3.6rem;
  color: #36c12d;
}

.p_items {
  margin-top: 1rem;
  width: 55%;
  height: 10rem;
  box-sizing: border-box;
  padding-left: 4.4rem;
  padding: 2.5rem 0 2.5rem 4.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.p_report {
  margin-top: 0;
  width: 65%;
  justify-content: space-between;
  align-items: flex-start;
  height: 12rem;
  font-size: 1.6rem;
  padding: 3rem 0 3rem 1.5rem;
}

.p_time {
  font-size: 1.4rem;
  color: #878787;
}

.point_blue,
.point_red {
  position: relative;
  justify-content: space-between;
  line-height: 1.7rem;
  height: 1.7rem;
  font-size: 1.2rem;
  width: 100%;
}

.point_red {
  color: #ff6d3f;
}

.point_blue::after,
.point_red::after {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #36c12d;
  color: #36c12d;
}

.point_red::after {
  background: #ff6d3f;
}
.loadMore {
  padding: 1rem 0;
  text-align: center;
}
</style>
